<template>
  <div>
    <button @click="up">上一页</button>
    <span>
      <button v-for="(shu, index) in zhang" :key="index" @click="ck(shu)">
        {{ shu }}
      </button>
    </span>
    <button @click="down">下一页</button>
  </div>
</template>
<script>
export default {
  props: ["arr"],
  data() {
    return {
      arr3: [],
      shu111: 1,
      zhang: Math.ceil(this.arr.length / this.arr[0].num1),
    };
  },
  watch: {
    arr: {
      handler() {
        this.zhang = Math.ceil(this.arr.length / this.arr[0].num1);

        // console.log(this.arr2);
      },
      immediate: true, //一进入页面就执行handler里的代码
      deep: true,
    },
  },
  created() {
    // console.log(this.arr[0].num1);
  },
  computed: {},
  methods: {
    ck(shu) {
      this.shu111 = shu;
      shu = shu - 1;
      this.arr3 = [
        ...this.arr.slice(
          shu * this.arr[0].num1,
          shu * this.arr[0].num1 + this.arr[0].num1
        ),
      ];
    //   console.log(this.arr3);
      this.$emit("sss", this.arr3);
    },
    up() {
    //   console.log(this.arr.length);
      if (this.shu111 > 1) {
        this.shu111 -= 1;
        this.ck(this.shu111);
        
      }
    },
    // 下一页
    down() {
      if (this.shu111 < this.zhang) {
        this.shu111 += 1;
        this.ck(this.shu111);
      }
    },
  },
};
</script>
<style lang='less' scoped>
</style>
